<template>
  <div class="goods-sku">
    <dl v-for="item in goods.specs" :key="item.name">
      <dt>{{item.name}}</dt>
      <dd>
        <template v-for="v in item.values" :key="v.name">
          <img v-if="v.picture" :class="{selected:v.select,disabled:v.disabled}" @click="select(item,v)" :src="v.picture" :title="v.name" :alt="v.name">
          <span v-else :class="{selected:v.select,disabled:v.disabled}" @click="select(item,v)">{{v.name}}</span>
      </template>
      </dd>
    </dl>
  </div>
</template>
<script>
import getPowerSet from '@/vender/power-set'
// 1.处理后台sku数据的函数---得到字典
const getStock = (val) => {
  const powerVal = {}
  val.forEach(v => {
    if (v.inventory) {
      // 引入幂算法
      const arr = getPowerSet(v.specs.map(v => v.valueName))
      arr.forEach(i => {
        const key = i.join('-')
        if (!powerVal[key]) powerVal[key] = [v.id]
        else powerVal[key].push(v.id)
      })
    }
  })
  // console.dir(powerVal)
  return powerVal
}
// 2.处理点击筛选条件返回的spu数据函数
const clickGoods = (data) => {
  const arr = []
  data.forEach((spe, i) => {
    const obj = spe.values.find(v => v.select)
    arr[i] = obj ? obj.name : undefined
  })
  // console.log(arr.join('-'))
  return arr
}
// 3.处理最后对应数据的函数---实现禁用
const disposeDisable = (specs, powerVal) => {
  specs.forEach((spe, i) => {
    // 调用处理点击筛选条件返回的spu数据函数
    const selectArr = clickGoods(specs)
    spe.values.forEach(val => {
      if (val.select) return
      selectArr[i] = val.name
      const key = selectArr.filter(v => v !== undefined).join('-')
      val.disabled = !powerVal[key]
    })
  })
}
// 4.接受父组件传过来的skuId处理函数
const initialSelect = (goods, skuId) => {
  const obj = goods.skus.find(v => v.id === skuId)
  obj && obj.specs.forEach((item, i) => {
    const val = goods.specs[i].values.find(v => v.name === item.valueName)
    if (val) val.select = true
  })
}
export default {
  name: 'GoodsSku',
  props: {
    goods: {
      type: Object,
      default: () => ({})
    },
    skuId: {
      type: String,
      default: ''
    }
  },

  setup (props, { emit }) {
    // 调用接受父组件传过来的skuId处理函数
    initialSelect(props.goods, props.skuId)
    // 调用处理后台sku数据的函数
    const powerVal = getStock(props.goods.skus)
    // 进来页面先判断
    disposeDisable(props.goods.specs, powerVal)
    // 点击筛选条件
    const select = (item, v) => {
      if (v.disabled) return
      if (v.select) v.select = false
      else {
        item.values.forEach((v) => { v.select = false })
        v.select = true
      }
      // 调用处理最后对应数据的函数
      disposeDisable(props.goods.specs, powerVal)
      // 5.数据通讯，子传父
      const arr = clickGoods(props.goods.specs).filter(v => v !== undefined)
      if (arr.length >= props.goods.specs.length) {
        const key = arr.join('-')
        const skuId = powerVal[key][0]
        const { inventory, oldPrice, price, specs } = props.goods.skus.find(v => v.id === skuId)
        emit('change', { skuId, inventory, oldPrice, price, attrsText: specs.map(v => `${v.name}:${v.valueName}`).join(',') })
      } else emit('change', {})
    }
    return { select }
  }
}
</script>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
